<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欧度男装</title>
    <meta name="keywords" content="欧度男装"/>
    <meta name="description" content="欧度男装"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1"/>

    <link rel="stylesheet" href="./static/css/swiper.min.css"/>
    <link rel="stylesheet" href="./static/css/amazeui.min.css"/>
    <link rel="stylesheet" href="./static/icomoon/style.css"/>
    <link rel="stylesheet" href="./static/css/common.css"/>
    <link rel="stylesheet" href="./static/css/ouhteu.css"/>

    <meta name="apple-mobile-web-app-title" content="欧度男装"/>
    <script type="text/javascript" src="./static/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="./static/js/swiper.min.js"></script>
    <script type="text/javascript" src="./static/js/amazeui.min.js"></script>
	<script type="text/javascript" src="./static/js/common.js"></script>
</head>
<body class="greyBg">
<header class="headerwithback">
    <div class="header_top">
        <a id="goBack"><i class="icon-arrow-left"></i></a>
        <p>我的购物车</p> 
        <a href="./alarm.html"><i class="icon-bell-o"></i></a>
    </div>    
</header>
<div class="headerHold"></div>
<div class="clearfix">
    <ul class="productList cardList clearfix">
        <li class="clearfix gap bl">
            <a class="checkbox am-fl checked">
                <span class="icon-check"></span>
            </a>
            <a class="pic">
                <img class="p-pic" src="./static/images/m_1.jpg">
            </a>
            <div class="des">
                <a href="./detail.html">
                    <h3 class="d-title">OUHTEU欧度西服千鸟格新款男装尼渤正品新贵休闲修身单西外套特价</h3>
                </a>
                <p class="d-price">
                    <span class="price-icon">蓝色 192/80</span>
                </p>
                <p class="d-price">
                    <span class="price-icon darkGray">¥ <span class="prePrice">120.77</span></span>
                    <span class="">× <span class="preNum">1</spam></span>
                </p>
            </div>
        </li>
        <li class="clearfix gap bl">
            <a class="checkbox am-fl">
                <span class="icon-check"></span>
            </a>
            <a class="pic">
                <img class="p-pic" src="./static/images/m_1.jpg">
            </a>
            <div class="des">
                <a href="./detail.html">
                    <h3 class="d-title">OUHTEU欧度西服千鸟格新款男装尼渤正品新贵休闲修身单西外套特价</h3>
                </a>
                <p class="d-price">
                    <span class="price-icon">蓝色 192/80</span>
                </p>
                <p class="d-price">
                    <span class="price-icon darkGray">¥ <span class="prePrice">438.21</span></span>
                    <span class="">× <span class="preNum">2</spam></span>
                </p>
            </div>
        </li>
        <li class="clearfix gap bl">
            <a class="checkbox am-fl">
                <span class="icon-check"></span>
            </a>
            <a class="pic">
                <img class="p-pic" src="./static/images/m_1.jpg">
            </a>
            <div class="des">
                <a href="./detail.html">
                    <h3 class="d-title">OUHTEU欧度西服千鸟格新款男装尼渤正品新贵休闲修身单西外套特价</h3>
                </a>
                <p class="d-price">
                    <span class="price-icon">蓝色 192/80</span>
                </p>
                <p class="d-price">
                    <span class="price-icon darkGray">¥ <span class="prePrice">438.63</span></span>
                    <span class="">× <span class="preNum">1</spam></span>
                </p>
            </div>
        </li>
    </ul>
</div>
<div class="fix-bar-holder"></div>
<div class="fix-bar cart-bar">
    <a class="checkAll checkbox am-fl">
        <span class="icon-check"></span>
    </a> 
    <label class="am-fl golden">&nbsp;全选</label>
    <span class="golden">合计：<b id="total_money">0</b> 元</span>
    <a href="./orders.html" class="am-fr mt normalBt goldenBt">结算<span id="total_amount">0</span></a>
</div>
<script>
$(function () {
    $(".checkbox").click(function(e){
        if($(this).hasClass("checkAll")){
            //如果是全选按钮
            if($(this).hasClass("checked")){
                $(".checkbox").removeClass("checked");
                $(this).removeClass("checked");
            } else{
                $(this).addClass("checked");
                $(".checkbox").addClass("checked");
            }
        } else{
            $(this).toggleClass("checked");
            //如果全部选中，则把全选按钮选中
            var allChecked = true;
            $(".cardList .checkbox").each(function(i,j){
                if(!$(j).hasClass("checked")){
                    allChecked = false;
                }
                return;
            })
            if(allChecked){
                $(".checkAll").addClass("checked");
            } else{
                $(".checkAll").removeClass("checked");
            }
        }
        count();
    });
    function count(){
        $("#total_amount").html($(".cardList .checked").length);
        var _total_money = 0;
        $(".cardList .checked").each(function(i,j){
            _total_money += $(j).parent().find(".prePrice").text() * $(j).parent().find(".preNum").text();
        })
        $("#total_money").html(_total_money.toFixed(2) );
    }
});
</script>
</body>
</html>
